<!DOCTYPE html>
<html>

<head lang="en">
    <title>找攻略</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/strategy.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/queryAndBlank.js"></script>
    <script>
        $(function () {
            //获得一条推荐的游记
            $.get(baseUrl + '/travelCommends', {type: 3, pageSize: 1}, function (data) {
                // console.log(data);
                $('.commend').renderValues(data.list[0], {
                    getHref: getHref
                })
            });
            //获得所有推荐的大攻略
            $.get(baseUrl + '/strategies', {state: 1}, function (data) {
                console.log(data);
                $('.strategyCommend').renderValues({list: data}, {
                    getHref: getHref
                })
            });

            var regionId;
            //查询所有状态为推荐的地区,并将其设置到ul中
            $.get(baseUrl + '/regions', {state: 1}, function (data) {
                console.log(data);
                var temp = '';
                var content = '';
                $.each(data, function (index, ele) {
                    temp += '<li class="nav-item" data-id="' + ele.id + '"><a  class="nav-link" data-toggle="pill" href="#pills-' + ele.id + '">' + ele.name + '</a></li>';
                    content += '<div class="tab-pane fade" id="pills-' + ele.id + '">' + ele.id + '</div>';
                })
                $('#pills-tab').append(temp);
                $('#pills-tabContent').append(content);

                //点击标签页,查询相应信息并渲染数据
                $('.nav-item[data-id]').click(function () {
                    //重置分页参数和总页数
                    currentPage = 2;
                    pages = 2;
                    regionId = $(this).data('id');
                    // console.log(regionId);
                    $.get(baseUrl + '/strategies/' + regionId, function (data) {
                        // console.log(data);
                        $('#pills-' + regionId).html(data);
                    }, "html");

                });
            });

            //当前页
            var currentPage = 2;
            //总页数
            var pages = 2;
            //标记是否可以进行查询,相当于同步锁
            var loading = true;

            $(window).scroll(function () {
                console.log("窗口在滚动");
                if (regionId != null) {
                    if (($(window).height() + $(document).scrollTop()) >= $(document).height() - 10) {
                        if (currentPage <= pages) {
                            queryAndBlank(baseUrl + '/strategies/' + regionId);
                        } else {
                            if (($(window).height() + $(document).scrollTop()) >= $(document).height() - 1) {
                                $(document).dialog({
                                    type: 'notice',
                                    infoText: '客官,已经到底啦!',
                                    autoClose: 2000,
                                    position: 'bottom'  // center: 居中; bottom: 底部
                                });
                            }

                        }
                    }
                }
            });

            //查询填充数据的方法,queryUrl是查询的请求资源,obj是被进行数据渲染的jQuery对象
            function queryAndBlank(queryUrl) {
                if (loading) {
                    //当有查询任务在进行时,关闭可查询开关
                    loading = false;
                    $.get(queryUrl, {currentPage: currentPage, pageSize: 4}, function (data) {
                        //模板渲染
                        $.each(data.list, function (index, ele) {
                            console.log(ele);
                            var temp = $('#template .mb').clone(true);
                            $(temp).find('img').attr('src', ele.coverUrl);
                            $(temp).find('span').html(ele.title);
                            console.log(ele.colletionNum);
                            $(temp).find('p').value(ele.colletionNum + "收藏");

                            $('.classify').append(temp);

                        })
                        //当前页自增
                        currentPage++;
                        //总页数
                        pages = data.pages;
                        //当查询结束之后,打开查询开关
                        loading = true;
                    }, 'json');
                }
            }


            /**
             *搜索功能
             */
            $("#searchBtn").click(function () {//有内容才可以搜索
                var keyword = $("#searchInp").val()
                if (keyword == null || keyword == "") {
                    $(document).dialog({
                        titleText: '温馨提示',
                        content: '搜索内容不能为空!',
                    });
                } else {

                    window.location.href = "/searchPage.html?keyword=" + keyword + ""
                }

            })

        })

    </script>

</head>

<body>
<div id="template" style="display: none">
    <div class="col-6 mb">
        <a href="../strategyCatalogs.html?id=">
            <img class="float-left">
            <div class="classify-text">
                <span></span>
                <p></p>
            </div>
        </a>
    </div>
</div>

<div class="search-head">
    <div class="row nav-search">
        <div class="col-1">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left fa-2x"></i></span>
            </a>
        </div>
        <div class="col-9">
            <div class="input-group-sm search">
                <input id="searchInp" class="form-control" placeholder="搜攻略">
            </div>
        </div>
        <div class="col-1">
            <i class="fa fa-search" id="searchBtn"
               style="color:white;font-size:25px;position: absolute;top: 23%;left: 88%">
            </i>
        </div>
    </div>
</div>

<ul class="nav nav-pills nav-justified border border-left-0 border-top-0 border-right-0" id="pills-tab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active show" data-toggle="pill" href="#pills-top">
            <span style="font-weight: bold;">推荐</span>
        </a>
    </li>
</ul>

<div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade active show" id="pills-top">
        <div class="container commend">
            <a render-fun="getHref" render-key="travelId" data-url="/travelContent.html?id=">
                <img render-src="coverUrl">
                <p>入住长隆熊猫酒店，天天都是儿童节</p>
            </a>
        </div>
        <hr>

        <div class="container strategyCommend">
            <h6>当季推荐</h6>
            <div class="row hot" render-loop="list">
                <div class="col-4">
                    <a render-fun="getHref" render-key="list.id" data-url="/strategyCatalogs.html?id=">
                        <img render-src="list.coverUrl">
                        <p render-html="list.title">成都攻略</p>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>


</body>

</html>
